<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2024-09-12 15:13:38
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-09-13 16:26:11
 * @FilePath: \new-yongqing\src\components\headerlink\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: your name
 * @Date: 2022-03-13 23:28:11
 * @LastEditTime: 2024-09-13 15:15:54
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \DTSWEEKLY_ZHJT\src\components\footer\index.vue
-->
<!-- footer -->
<template>
  <div class="footer">
    <div class="footer_link">
      <div
        @click="LinkClick(item)"
        :class="PagePath.indexOf(item.path) !== -1 ? 'link isactive' : 'link'"
        v-for="item in Link"
        :key="item.key"
      >
        <div class="link-img">
          <transition
            appear
            name="custom-classes-transition"
            enter-active-class="animate__animated    animate__fadeIn"
            leave-active-class="animate__animated   animate__fadeOut"
          >
            <img
              :src="item.activeImg"
              alt=""
              v-if="PagePath.indexOf(item.path) !== -1"
            />
          </transition>
          <transition
            appear
            name="custom-classes-transition"
            enter-active-class="animate__animated    animate__fadeIn"
            leave-active-class="animate__animated   animate__fadeOut"
          >
            <img
              :src="item.img"
              alt=""
              v-if="PagePath.indexOf(item.path) === -1"
            />
          </transition>
        </div>

        <transition
          appear
          name="custom-classes-transition"
          enter-active-class="animate__animated animate__delay-1s   animate__fadeIn"
          leave-active-class="animate__animated   animate__fadeOut"
        >
          <div
            v-if="item.children && PagePath.indexOf(item.path) !== -1"
            class="toplinks"
            @click.stop
          >
            <div
              @click.stop="MonLinkClick(mon)"
              :class="
                PagePath.indexOf(mon.path) !== -1
                  ? 'toplink toplink_active'
                  : 'toplink'
              "
              v-for="mon in item.children"
              :key="mon.key"
            >
              <span>
                {{ mon.name }}
              </span>
            </div>
          </div>
        </transition>
        <div class="link_name">
          <img
            :src="
              PagePath.indexOf(item.path) !== -1 ? item.activeIcon : item.icon
            "
            alt=""
          />
          <span>
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
// 路由监听
onBeforeRouteUpdate((to) => {
  PagePath.value = to.path
})
const Key = computed(() => {
  let key = ref()
  switch (PagePath.value.split('/')[2]) {
    case 'EmergencyManagement':
      key.value = 75
      break
    case 'IntelligentSecurity':
      key.value = 250
      break
    // case "PortOfDispatch":
    //   key.value = 425;
    //   break;
    case 'EquipmentManagement':
      key.value = 595
      break

    default:
      break
  }
  return key.value
})
// 路由信息
const Link = reactive([
  {
    name: '总体态势',
    key: 1,
    path: '/home/Overall',
    icon: require('@/assets/images/link/navigation2_ICON2_normal@2x.png'),
    activeIcon: require('@/assets/images/link/navigation2_ICON2_click@2x.png'),
    img: require('@/assets/images/link/btn_style2@2x.png'),
    activeImg: require('@/assets/images/link/btn_style2_choosed@2x.png'),
  },
  {
    name: '乡村政务',
    key: 2,
    path: '/home/Countryside',
    icon: require('@/assets/images/link/navigation2_ICON1_normal@2x.png'),
    activeIcon: require('@/assets/images/link/navigation2_ICON1_click@2x.png'),
    img: require('@/assets/images/link/btn_style1@2x.png'),
    activeImg: require('@/assets/images/link/btn_style2_choosed@2x.png'),
  },
  {
    name: '治理有效',
    key: 3,
    path: '/home/Govern',
    icon: require('@/assets/images/link/navigation2_ICON3_normal@2x.png'),
    activeIcon: require('@/assets/images/link/navigation2_ICON3_click@2x.png'),
    img: require('@/assets/images/link/btn_style1@2x.png'),
    activeImg: require('@/assets/images/link/btn_style2_choosed@2x.png'),
  },
  {
    name: '文旅教育',
    key: 4,
    path: '/home/CulturalTravel',
    icon: require('@/assets/images/link/literary.png'),
    activeIcon: require('@/assets/images/link/literary_yellow.png'),
    img: require('@/assets/images/link/btn_style1@2x.png'),
    activeImg: require('@/assets/images/link/btn_style2_choosed@2x.png'),
  },
])
const Router = useRouter()
const Route = useRoute()
const PagePath = ref('')
// 一级路由点击
const LinkClick = (val: {
  name: string
  key: number
  path: string
  icon: string
}) => {
  Router.push({
    path: val.path,
  })
  PagePath.value = val.path
}
// 子路由点击
const MonLinkClick = (val: {
  name: string
  key: string
  path: string
  icon: string
}) => {
  Router.push({
    path: val.path,
  })
  PagePath.value = val.path
}
const rain: any = ref([])
const link_icon = ref()
onMounted(() => {
  console.log(link_icon.value, 'link_icon')

  // console.log(rain.value, "rain");

  PagePath.value = Route.path
})
</script>
<style lang="scss" scoped>
@mixin test($l) {
  left: calc(1vw * #{$l} / #{$widthRatio});
}

.footer {
  z-index: 4;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 168px;
  background: url('~@/assets/images/link/navigation1_bg_click@2x.png') no-repeat;
  background-size: 100% 100%;

  .footer_link {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25.11px;
    height: 104px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;

    .link {
      width: 220px;
      height: 72px;
      margin-top: 30px;
      //   @include Margin(20, 8, 0, 0);
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      font-size: 25px;
      flex-direction: column;
      transition: all 0.5s;
      .link-img {
        width: 100%;
        position: absolute;
        transition: all 0.3s;
        height: 100%;
        display: flex;
        justify-content: center;
        //bottom: 0;

        img {
          width: 100%;
          height: 60px;
          transition: all 0.3s;
          position: absolute;
          //bottom: 0;
          // transform: translate(0, -90%);
        }
      }

      &.isactive {
        letter-spacing: 1px;
        .link-img {
          width: 100%;
          position: absolute;
          transition: all 0.3s;
          height: 100%;
          display: flex;
          justify-content: center;
          //bottom: 0;

          img {
            width: 100%;
            height: 60px;
            transition: all 0.3s;
            position: absolute;
            // transform: translate(0, -90%);
          }
        }

        .link_name {
          //@include FontSize(18);
          letter-spacing: 1px;
          // color: #ffdeab;
        }
      }

      .link_name {
        display: flex;
        // @include Width(143);
        width: 100%;
        font-size: 24px;
        text-align: center;
        letter-spacing: 0.88px;
        font-family: Oppo, serif;
        font-weight: 500;
        line-height: 50px;
        margin-top: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
        text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
        color: #fff;

        opacity: 0.9;
        font-family: OPPOSans-R;
        font-weight: lighter;
        color: #ffffff;
        text-shadow: 0 1.33px 2.67px #000101;
        img {
          width: 50px;
          height: 50px;
        }
      }

      .toplinks {
        //position: fixed;
        //@include Bottom(105);
        //left: 0;
        //right: 0;
        //margin: auto;
        //@include Width(800);
        //@include wHeight(40);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;

        .toplink {
          width: 160px;
          height: 40px;
          margin: 0px 20px 0px 20px;
          font-size: 28px;
          color: #ffffff98;
          display: flex;
          font-family: Oppo;

          justify-content: center;
          align-items: center;

          background-size: 100% 100%;

          &.toplink_active {
            //background: url("~@/assets/images/基础/header/btn_当前选中@2x.png") no-repeat center/cover;
            background-size: 100% 100%;
            color: #ffdeab;

            .svg_left {
              // font-size: 3000px;
              //color: #ffffff;
              //transform: scale(5);
            }
          }
        }
      }
    }
  }
}
</style>
